@charset "UTF-8";
/**
  * 定义盒模型内边距
  * 使用方式 全部内边距 X轴内边距 Y轴内边距  分别定义top left bottom right 内边距
  * default size [xs, sm, default, md, lg]
  */
/**
  * 定义盒模型外边距
  * 使用方式 全部外边距 X轴外边距 Y轴外边距  分别定义top left bottom right 外边距
  * default size [xs, sm, default, md, lg]
  */
/**
  * 定义盒模型边框颜色
  * default level [lighter, light, default, dark, darker]
  */
/**
  * 定义盒模型圆角
  * default size [xs, sm, default, md, ld]
  */
/**
  * 定义flex item在主轴的排列方向。
  * row 主轴为水平方向，起点在左端
  * row-reverse 主轴为水平方向，起点在右端
  * column 主轴为垂直方向，起点在上端
  * column-reverse 主轴为垂直方向，起点在下端
  */
/**
  * 定义flex item在一行中是否换行。
  * nowrap 不换行
  * wrap 换行，第一行在上方
  * wrap-reverse 换行，第一行在下方
  */
/** 定义flex item在主轴上的对齐方式。
  * start 左对齐
  * end 右对齐
  * center 居中
  * between 两端对齐 item之间的间距相等
  * around 每个item两侧间隔相等。
  */
/**
  * 定义flex item在垂直轴上对齐方式。
  * start 交叉轴的起点对齐
  * end 交叉轴的终点对齐
  * center 交叉轴的中点对齐
  * baseline 项目的第一行文字的基线对齐
  * stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
  */
/**
  * 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
  * start 与交叉轴的起点对齐。
  * end 与交叉轴的终点对齐。
  * center 与交叉轴的中点对齐。
  * between 与交叉轴两端对齐，轴线之间的间隔平均分布。
  * around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  * stretch 轴线占满整个交叉轴。
  */
/**
  * 定义flex item的排列顺序。数值越小，排列越靠前，默认为0。
  * default ranges [1 ~ 6]
  * order_first = order_1
  * order_last = order_6
  */
/**
  * 定义单个项目有与其他项目不一样的对齐方式，可覆盖align-
  * auto 继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  * start 交叉轴的起点对齐
  * end 交叉轴的终点对齐
  * center 交叉轴的中点对齐
  * baseline 项目的第一行文字的基线对齐
  * stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
  */
/**
  * 定义flex item在一行中所占比例
  * default ranges [1 ~ 12]
  */
/*
  *
  *
  */
/**
  * 定义gird布局样式
  * columns 12
  * spaces [xs, sm, default, md, lg]
  *
  */
/**
  * 定义标题文字大小
  * default size [1 - 6]
  * default step 2px
  */
/**
  * 定义文字主题色
  */
/**
  * 定义段落之间间距
  * default size [xs, sm, default, md, lg]、
  * pitch_size 作用在row 定义单行的间距
  * pitch_size 作用在section 定义所有行间距
  * last-pitch_clear 清除最后一行间距
  */
/*
* 定义主题色变量
*/
/*
  * 定义文字变量
  * default level: [lighter,light,default,dark,darker]
  */
/*
  * 定义边框色变量
  * default level: [lighter,light,default,dark,darker]
  */
/*
  * 定义间距变量
  * default size: [xs,sm,default,md,lg]
  * default value: 16px
  * default offset: 4
  */
/*
  * 定义圆角变量
  * default size: [xs,sm,default,md,lg]
  * default value: 6px
  * default offset: 2
  */
.flex_row {
  display: flex;
  flex-direction: row;
}

.flex_row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.flex_column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

.flex_nowrap {
  display: flex;
  flex-wrap: nowrap;
}

.flex_wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex_wrap-reverse {
  display: flex;
  flex-wrap: wrap-reverse;
}

.justify_start {
  display: flex;
  justify-content: flex-start;
}

.justify_end {
  display: flex;
  justify-content: flex-end;
}

.justify_center {
  display: flex;
  justify-content: center;
}

.justify_between {
  display: flex;
  justify-content: space-between;
}

.justify_around {
  display: flex;
  justify-content: space-around;
}

.align-items_start {
  display: flex;
  align-items: flex-start;
}

.align-items_end {
  display: flex;
  align-items: flex-end;
}

.align-items_center {
  display: flex;
  align-items: center;
}

.align-items_baseline {
  display: flex;
  align-items: baseline;
}

.align-items_stretch {
  display: flex;
  align-items: stretch;
}

.align-content_start {
  display: flex;
  align-content: flex-start;
}

.align-content_end {
  display: flex;
  align-content: flex-end;
}

.align-content_center {
  display: flex;
  align-content: center;
}

.align-content_between {
  display: flex;
  align-content: space-between;
}

.align-content_around {
  display: flex;
  align-content: space-around;
}

.align-content_stretch {
  display: flex;
  align-content: stretch;
}

.order_first {
  order: 0;
}

.order_0 {
  order: 0;
}

.order_1 {
  order: 1;
}

.order_2 {
  order: 2;
}

.order_3 {
  order: 3;
}

.order_4 {
  order: 4;
}

.order_5 {
  order: 5;
}

.order_last {
  order: 6;
}

.order_6 {
  order: 6;
}

.align-self-auto {
  align-self: auto;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

.flex {
  position: relative;
  flex: 1;
}

.flex_1 {
  position: relative;
  flex: 1;
}

.flex_2 {
  position: relative;
  flex: 2;
}

.flex_3 {
  position: relative;
  flex: 3;
}

.flex_4 {
  position: relative;
  flex: 4;
}

.flex_5 {
  position: relative;
  flex: 5;
}

.flex_6 {
  position: relative;
  flex: 6;
}

.flex_7 {
  position: relative;
  flex: 7;
}

.flex_8 {
  position: relative;
  flex: 8;
}

.flex_9 {
  position: relative;
  flex: 9;
}

.flex_10 {
  position: relative;
  flex: 10;
}

.flex_11 {
  position: relative;
  flex: 11;
}

.flex_12 {
  position: relative;
  flex: 12;
}

.flex_13 {
  position: relative;
  flex: 13;
}

.flex_14 {
  position: relative;
  flex: 14;
}

.flex_15 {
  position: relative;
  flex: 15;
}

.flex_16 {
  position: relative;
  flex: 16;
}

.flex_17 {
  position: relative;
  flex: 17;
}

.flex_18 {
  position: relative;
  flex: 18;
}

.flex_19 {
  position: relative;
  flex: 19;
}

.flex_20 {
  position: relative;
  flex: 20;
}

.flex_21 {
  position: relative;
  flex: 21;
}

.flex_22 {
  position: relative;
  flex: 22;
}

.flex_23 {
  position: relative;
  flex: 23;
}

.flex_24 {
  position: relative;
  flex: 24;
}

.p_default {
  padding: 16px !important;
}

.px_default {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.py_default {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.pl_default {
  padding-left: 16px !important;
}

.pr_default {
  padding-right: 16px !important;
}

.pt_default {
  padding-top: 16px !important;
}

.pb_default {
  padding-bottom: 16px !important;
}

.p_xs {
  padding: 8px !important;
}

.px_xs {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.py_xs {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.pl_xs {
  padding-left: 8px !important;
}

.pr_xs {
  padding-right: 8px !important;
}

.pt_xs {
  padding-top: 8px !important;
}

.pb_xs {
  padding-bottom: 8px !important;
}

.p_sm {
  padding: 12px !important;
}

.px_sm {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.py_sm {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.pl_sm {
  padding-left: 12px !important;
}

.pr_sm {
  padding-right: 12px !important;
}

.pt_sm {
  padding-top: 12px !important;
}

.pb_sm {
  padding-bottom: 12px !important;
}

.p_md {
  padding: 20px !important;
}

.px_md {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.py_md {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.pl_md {
  padding-left: 20px !important;
}

.pr_md {
  padding-right: 20px !important;
}

.pt_md {
  padding-top: 20px !important;
}

.pb_md {
  padding-bottom: 20px !important;
}

.p_lg {
  padding: 24px !important;
}

.px_lg {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.py_lg {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.pl_lg {
  padding-left: 24px !important;
}

.pr_lg {
  padding-right: 24px !important;
}

.pt_lg {
  padding-top: 24px !important;
}

.pb_lg {
  padding-bottom: 24px !important;
}

.m_default {
  margin: 16px !important;
}

.mx_default {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.my_default {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.ml_default {
  margin-left: 16px !important;
}

.mr_default {
  margin-right: 16px !important;
}

.mt_default {
  margin-top: 16px !important;
}

.mb_default {
  margin-bottom: 16px !important;
}

.m_xs {
  margin: 8px !important;
}

.mx_xs {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.my_xs {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.ml_xs {
  margin-left: 8px !important;
}

.mr_xs {
  margin-right: 8px !important;
}

.mt_xs {
  margin-top: 8px !important;
}

.mb_xs {
  margin-bottom: 8px !important;
}

.m_sm {
  margin: 12px !important;
}

.mx_sm {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.my_sm {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.ml_sm {
  margin-left: 12px !important;
}

.mr_sm {
  margin-right: 12px !important;
}

.mt_sm {
  margin-top: 12px !important;
}

.mb_sm {
  margin-bottom: 12px !important;
}

.m_md {
  margin: 20px !important;
}

.mx_md {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.my_md {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.ml_md {
  margin-left: 20px !important;
}

.mr_md {
  margin-right: 20px !important;
}

.mt_md {
  margin-top: 20px !important;
}

.mb_md {
  margin-bottom: 20px !important;
}

.m_lg {
  margin: 24px !important;
}

.mx_lg {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.my_lg {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.ml_lg {
  margin-left: 24px !important;
}

.mr_lg {
  margin-right: 24px !important;
}

.mt_lg {
  margin-top: 24px !important;
}

.mb_lg {
  margin-bottom: 24px !important;
}

.border_lighter {
  border: solid 1px #cccccc;
}

.border_light {
  border: solid 1px #aaaaaa;
}

.border_default {
  border: solid 1px #888888;
}

.border_dark {
  border: solid 1px #666666;
}

.border_darker {
  border: solid 1px #444444;
}

.radius_default {
  border-radius: 12px;
}

.radius_xs {
  border-radius: 2px;
}

.radius_sm {
  border-radius: 8px;
}

.radius_md {
  border-radius: 16px;
}

.radius_lg {
  border-radius: 20px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}
.grid .grid-item {
  width: 100%;
}
.grid.column_2 .grid-item {
  width: calc(100% / 2);
}
.grid.column_3 .grid-item {
  width: calc(100% / 3);
}
.grid.column_4 .grid-item {
  width: calc(100% / 4);
}
.grid.column_5 .grid-item {
  width: calc(100% / 5);
}
.grid.column_6 .grid-item {
  width: calc(100% / 6);
}
.grid.column_7 .grid-item {
  width: calc(100% / 7);
}
.grid.column_8 .grid-item {
  width: calc(100% / 8);
}
.grid.column_9 .grid-item {
  width: calc(100% / 9);
}
.grid.column_10 .grid-item {
  width: calc(100% / 10);
}
.grid.column_11 .grid-item {
  width: calc(100% / 11);
}
.grid.column_12 .grid-item {
  width: calc(100% / 12);
}
.grid.column_13 .grid-item {
  width: calc(100% / 13);
}
.grid.column_14 .grid-item {
  width: calc(100% / 14);
}
.grid.column_15 .grid-item {
  width: calc(100% / 15);
}
.grid.column_16 .grid-item {
  width: calc(100% / 16);
}
.grid.column_17 .grid-item {
  width: calc(100% / 17);
}
.grid.column_18 .grid-item {
  width: calc(100% / 18);
}
.grid.column_19 .grid-item {
  width: calc(100% / 19);
}
.grid.column_20 .grid-item {
  width: calc(100% / 20);
}
.grid.column_21 .grid-item {
  width: calc(100% / 21);
}
.grid.column_22 .grid-item {
  width: calc(100% / 22);
}
.grid.column_23 .grid-item {
  width: calc(100% / 23);
}
.grid.column_24 .grid-item {
  width: calc(100% / 24);
}
.grid.gap_default {
  padding: 8px;
}
.grid.gap_default.gap_clear {
  margin: -16px;
}
.grid.gap_default .grid-item {
  padding: 8px;
}
.grid.gap_xs {
  padding: 4px;
}
.grid.gap_xs.gap_clear {
  margin: -8px;
}
.grid.gap_xs .grid-item {
  padding: 4px;
}
.grid.gap_sm {
  padding: 6px;
}
.grid.gap_sm.gap_clear {
  margin: -12px;
}
.grid.gap_sm .grid-item {
  padding: 6px;
}
.grid.gap_md {
  padding: 10px;
}
.grid.gap_md.gap_clear {
  margin: -20px;
}
.grid.gap_md .grid-item {
  padding: 10px;
}
.grid.gap_lg {
  padding: 12px;
}
.grid.gap_lg.gap_clear {
  margin: -24px;
}
.grid.gap_lg .grid-item {
  padding: 12px;
}

.h1, h1 {
  font-size: 26px;
  line-height: 1.6;
}

.h2, h2 {
  font-size: 24px;
  line-height: 1.6;
}

.h3, h3 {
  font-size: 22px;
  line-height: 1.6;
}

.h4, h4 {
  font-size: 20px;
  line-height: 1.6;
}

.h5, h5 {
  font-size: 18px;
  line-height: 1.6;
}

.h6, h6 {
  font-size: 16px;
  line-height: 1.6;
}

.color_lighter {
  color: #cccccc;
}

.color_light {
  color: #aaaaaa;
}

.color_default {
  color: #888888;
}

.color_dark {
  color: #666666;
}

.color_darker {
  color: #444444;
}

.crosshair {
  cursor: crosshair;
}

.pointer {
  cursor: pointer;
}

.move {
  cursor: move;
}

.text {
  cursor: text;
}

.wait {
  cursor: wait;
}

.help {
  cursor: help;
}

.e-resize {
  cursor: e-resize;
}

.ne-resize {
  cursor: ne-resize;
}

.nw-resize {
  cursor: nw-resize;
}

.n-resize {
  cursor: n-resize;
}

.se-resize {
  cursor: se-resize;
}

.sw-resize {
  cursor: sw-resize;
}

.s-resize {
  cursor: s-resize;
}

.w-resize {
  cursor: w-resize;
}

.section .last-pitch_clear .row:last-child {
  margin-bottom: unset !important;
}
.section .row.pitch_default {
  margin-bottom: 16px;
}
.section.pitch_default .row {
  margin-bottom: 16px;
}
.section .row.pitch_xs {
  margin-bottom: 8px;
}
.section.pitch_xs .row {
  margin-bottom: 8px;
}
.section .row.pitch_sm {
  margin-bottom: 12px;
}
.section.pitch_sm .row {
  margin-bottom: 12px;
}
.section .row.pitch_md {
  margin-bottom: 20px;
}
.section.pitch_md .row {
  margin-bottom: 20px;
}
.section .row.pitch_lg {
  margin-bottom: 24px;
}
.section.pitch_lg .row {
  margin-bottom: 24px;
}